<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {
  width:100px;
  height:100px;
}
.box1 {
  background:red;
}
.box2 {
  background:blue;
}
.box3 {
  background:green;
}
</style>
</head>

<body>
  <span class="box1">1</span>
  <div class="box2">2</div>
  <div class="box3">3</div>
  相对定位：<br>
  position:relative; top:50px; left:100px;  加给box1或box2或box3<br>
  >>>>基于原来的位置发生定位偏移,原来的位置将继续保留<br>
  相对定位的特点：<br>
  1.不会影响元素本身的特性（块元素还是块元素，内嵌还是内嵌）<br>
  2.不会使元素脱离文档流 （可以总结为，基本是没有影响的）
</body>
</html>
